
<template>
    <!-- <h3>首页</h3>
    <button @click="$router.push('/login')">返回</button> -->
  <div class="content">

        <main-layout>
           <van-search v-model="value" placeholder="请输入搜索关键词" />
           <!-- 热门导航 -->
           <van-tabs >
                <!-- eslint-disable-next-line vue/valid-v-for -->
                <van-tab v-for="item in tabList" :key="item.id" :title="item.name">
                </van-tab>
            </van-tabs>
            <!-- 轮播 -->
        <van-swipe :autoplay="3000"
          :height="150" >
          <van-swipe-item v-for="item in bannerList" :key="item.id">
            <img v-lazy="item.image" style="width:100%; height:100%"/>
          </van-swipe-item>
        </van-swipe>
        <!-- 下拉刷新 -->
        <van-list
          v-model="loading"
          :finished="isEnd"
          finished-text="没有更多了"
          @load="onLoad"
        >
           <van-card
                v-for="item in recomList"
                :key="item.id"
                num="2"
                :price="item.price | money"
                desc="描述信息"
                :thumb="item.image"
                >
                <template v-slot:title>
                  <div class="van-ellipsis">{{item.title}}</div>
                </template>
                <!-- <template #desc>
                 <span>{{item.isFreePostage}}</span>
                 <span>{{item.couponValue}}</span>
                </template> -->
                <template v-slot:num>
                   <div>月销量:{{item.saleNum}}</div>
                   <van-button type="primary" size="mini" @click="clickEvt">加入购物车</van-button>
                </template>
                <template v-slot:desc>
                  <span style="color:red">{{item.commodityTypeName}}</span>
                  <div style="margin-left:150px; color:red ; width:50px" >{{item.isFreePostage?"包邮":''}}</div>
                  <span style="border:1px solid #ddd; color:red" >{{item.couponValue}}</span>

                </template>
           </van-card>
        </van-list>

        </main-layout>

 </div>

</template>

<script>
import { bannerApi, tabApi, recomApi } from '@/api/homeApi'

export default {
  data () {
    return {
      value: '',
      bannerList: [], // 轮播列表
      tabList: [], // 导航列表
      recomList: [], // 推荐列表
      loading: true, // 商品列表中是否正在加载列表数据
      isEnd: false, // 是否所有推荐商品已查完
      nextIndex: 0 // 下一页推荐商品查询起始索引'
    }
  },
  async created () {
    try {
      // Promise.all([bannerApi, tabApi]) // 结构赋值
      const [{ value: bannerRerult }, { value: tabResult }, { value: recomResult }] = await Promise.allSettled(
        [bannerApi(), tabApi({ id: 'su' }), recomApi()]
      ) // 解构赋值
      if (bannerRerult.data.code === 200) { // allSettled 用法一样
        this.bannerList = bannerRerult.data.data.list
      }
      if (tabResult.data.code === 200) { // allSettled 用法一样
        this.tabList = tabResult.data.data.list
      }
      if (recomResult.data.code === 200) { // allSettled 用法一样
        this.recomList = recomResult.data.data.list
      }
    } catch (error) {
      console.log('错误的:', error)
    }
  },
  methods: {
    clickEvt () {
      // 提示
      // this.$toast({
      //   type: 'success',
      //   message: '加入成功'
      // })
      this.$toast('加入购物车的成功')
    },

    async onLoad () {
      // 异步更新数据
      console.log('加载更多')
      console.log(this.nextIndex)
      const recomResult = await recomApi(this.nextIndex)
      // const { data } = await recomApi(this.nextIndex)
      // console.log(data, '---recomResult onload')
      if (recomResult.data.code === 200) {
        this.recomList = [...this.recomList, ...recomResult.data.data.list]
        this.nextIndex = recomResult.data.data.nextIndex
        this.isEnd = recomResult.data.data.isEnd
        this.loading = false
      }
    }
  }
}

</script>

<style lang="less" scoped>
.content {
  height: 100%;
  position: relative;
    > .main-layout main  {
          // header{
          //     width: 100%;
          //     height: 48px;
          //     background: red;
          //     position: absolute;
          //     top: 0;
          // }
          >.van-swipe{
            // margin-top:40px ;
          }
    }
}

</style>
